import React, { useCallback, useState } from 'react'
import styles from './index.module.less'
import { Input, Select, Checkbox, Button, Table, message } from 'antd'
import { SketchPicker } from 'react-color'
import { cloneDeep } from 'lodash'
import moment from 'moment'
import { getUId } from '../../utils/tool'

const { Option } = Select

const RightBar = (props) => {
	const {
		curType,
		curSelectNodeIdx,
		setCurSelectNode,
		curSelectNode,
		dataList,
		setDataList,
		revokeList,
		setRevokeList,
		curSelectDOM,
	} = props

	const [recoverList, setRecoverList] = useState([])

	const rightBartColumns = [
		{
			align: 'center',
			title: '绑定值value',
			dataIndex: 'value',
			render: (value, row, idx) => {
				return <Input onChange={(event) => rightBarValueChange(event, idx, 'value')} value={row.value} />
			},
		},
		{
			align: 'center',
			title: '显示内容label',
			dataIndex: 'label',
			render: (value, row, idx) => {
				return <Input onChange={(event) => rightBarValueChange(event, idx, 'label')} value={row.label} />
			},
		},
		{
			align: 'center',
			title: '操作',
			dataIndex: 'operation',
			render: (v, row, idx) => {
				return (
					<>
						<Button onClick={() => curNodeDelOption(idx)} size={'small'} type={'link'}>
							删除
						</Button>
						{idx === curSelectNode.options.length - 1 && (
							<Button onClick={() => curNodeAddOption()} size={'small'} type={'link'}>
								添加
							</Button>
						)}
					</>
				)
			},
		},
	]

	const curNodeDelOption = (type, idx) => {
		const newSelect = cloneDeep(curSelectNode)
		if (newSelect.options.length === 1) {
			message.warn('表格至少有一条内容～')
			return
		}
		newSelect.options.splice(idx, 1)
		setCurSelectNode(newSelect)
	}

	const curNodeAddOption = () => {
		const newSelect = cloneDeep(curSelectNode)
		newSelect.options.push({ value: '', label: '', uuid: getUId() })
		setCurSelectNode(newSelect)
	}

	const rightBarValueChange = (event, idx, tag) => {
		const value = event.target.value
		const newSelect = cloneDeep(curSelectNode)

		if (tag === 'value' && value) {
			const flag = newSelect.options.some((item) => {
				return `${item.value}` === `${value}`
			})
			if (flag) {
				message.warning('绑定值value输入重复')
				return
			}
		}
		if (tag === 'label' && value) {
			const flag = newSelect.options.some((item) => {
				return `${item.label}` === `${value}`
			})
			if (flag) {
				message.warning('显示内容label输入重复')
				return
			}
		}

		newSelect.options[idx][tag] = value
		setCurSelectNode(newSelect)
	}

	const valueChange = (value, field) => {
		setCurSelectNode((target) => {
			return { ...target, [field]: value }
		})
	}

	const submitNode = useCallback(() => {
		const newDataList = cloneDeep(dataList)
		newDataList[curSelectNodeIdx] = curSelectNode

		if (curType === 'radio') {
			const flag = curSelectNode.options.every((item) => item.value && item.label)
			if (!flag) {
				message.warn('请完善表格内容')
				return
			}
		}
		if (curType === 'datepicker' && curSelectNode.pickerType === 'range') {
			if (curSelectNode.startField) {
				newDataList[curSelectNodeIdx][curSelectNode.startField] = moment(Date.now())
			} else {
				newDataList[curSelectNodeIdx].startTime = moment(Date.now())
			}
			if (curSelectNode.endField) {
				newDataList[curSelectNodeIdx][curSelectNode.endField] = moment(Date.now())
			} else {
				newDataList[curSelectNodeIdx].endTime = moment(Date.now())
			}
		}

		const targetDOM = curSelectDOM.childNodes[0] || null
		if (targetDOM) {
			targetDOM.style.height = curSelectNode.height - 2 + 'px'
			targetDOM.style.width = curSelectNode.width - 2 + 'px'
		}

		setRevokeList((l) => {
			l.length && l.push(cloneDeep(dataList))
			!l.length && l.push([])
			return [...l]
		})
		setDataList([...newDataList])
	}, [dataList, curSelectNode])

	const resetNode = () => {
		const newNode = cloneDeep(dataList[curSelectNodeIdx])
		setCurSelectNode(newNode)
	}

	const revokeClick = () => {
		if (!revokeList.length) return
		const target = revokeList[revokeList.length - 1]
		let popTarget
		setRevokeList((l) => {
			popTarget = l.pop()
			return [...l]
		})
		setRecoverList((l) => {
			l.push(dataList)
			return [...l]
		})
		setDataList(cloneDeep(target))
		setCurSelectNode(cloneDeep(target)[curSelectNodeIdx])
	}

	const recoverClick = () => {
		if (!recoverList.length) return
		const target = recoverList[recoverList.length - 1]
		let popTarget
		setRecoverList((l) => {
			popTarget = l.pop()
			return [...l]
		})
		setRevokeList((l) => {
			l.push(dataList)
			return [...l]
		})
		setDataList(cloneDeep(target))
		setCurSelectNode(cloneDeep(target)[curSelectNodeIdx])
	}

	return (
		<div className={styles.rightBar}>
			{/*<button className={styles.btnL} onClick={revokeClick}>*/}
				{/*撤销*/}
			{/*</button>*/}
			{/*<button className={styles.btnL} onClick={recoverClick}>*/}
				{/*恢复*/}
			{/*</button>*/}
			<div className={styles.selectTitle}>{curSelectNodeIdx !== null ? '组件设置' : '容器设置'}</div>
			{curSelectNodeIdx !== null && curType === 'text' && (
				<div>
					<span className={styles.rightBarT}>组件标识</span>
					<input
						type="text"
						onChange={(event) => valueChange(event.target.value, 'tag')}
						value={curSelectNode.tag || ''}
					/>
					<br />
					<span className={styles.rightBarT}>显示文本</span>
					<input
						type="text"
						onChange={(event) => valueChange(event.target.value, 'value')}
						key={curSelectNodeIdx}
						value={curSelectNode.value || ''}
					/>
					<br />
					<span className={styles.rightBarT}>字体颜色</span>
					<SketchPicker onChange={(value) => valueChange(value.hex, 'color')} color={curSelectNode.color} />
					<br />
					<span className={styles.rightBarT}>字体大小</span>
					<br />
					<Select onChange={(value) => valueChange(value, 'fontSize')} value={curSelectNode.fontSize || 14}>
						<Option value={12}>12px</Option>
						<Option value={14}>14px</Option>
						<Option value={16}>16px</Option>
					</Select>
				</div>
			)}

			{curSelectNodeIdx !== null && curType === 'textInput' && (
				<div>
					<span className={styles.rightBarT}>组件标识</span>
					<input
						onChange={(event) => valueChange(event.target.value, 'tag')}
						type="text"
						value={curSelectNode.tag || ''}
					/>
					<br />
					<span className={styles.rightBarT}>绑定字段</span>
					<input
						type="text"
						onChange={(event) => valueChange(event.target.value, 'field')}
						key={curSelectNodeIdx}
						value={curSelectNode.field || ''}
					/>
				</div>
			)}

			{curSelectNodeIdx !== null && curType === 'number' && (
				<div>
					<span className={styles.rightBarT}>组件标识</span>
					<input
						onChange={(event) => valueChange(event.target.value, 'tag')}
						type="text"
						value={curSelectNode.tag || ''}
					/>
					<br />
					<span className={styles.rightBarT}>绑定字段</span>
					<input
						type="text"
						onChange={(event) => valueChange(event.target.value, 'field')}
						key={curSelectNodeIdx}
						value={curSelectNode.field || ''}
					/>
				</div>
			)}

			{curSelectNodeIdx !== null && curType === 'switch' && (
				<div>
					<span className={styles.rightBarT}>组件标识</span>
					<input
						onChange={(event) => valueChange(event.target.value, 'tag')}
						type="text"
						value={curSelectNode.tag || ''}
					/>
					<br />
					<span className={styles.rightBarT}>绑定字段</span>
					<input
						type="text"
						onChange={(event) => valueChange(event.target.value, 'field')}
						key={curSelectNodeIdx}
						value={curSelectNode.field || ''}
					/>
					<br />
					<span className={styles.rightBarT}>开启时文字描述</span>
					<input
						type="text"
						onChange={(event) => valueChange(event.target.value, 'onText')}
						key={`${curSelectNodeIdx}onText`}
						value={curSelectNode.onText || ''}
					/>
					<br />
					<span className={styles.rightBarT}>关闭时文字描述</span>
					<input
						type="text"
						onChange={(event) => valueChange(event.target.value, 'offText')}
						key={`${curSelectNodeIdx}offText`}
						value={curSelectNode.offText || ''}
					/>
				</div>
			)}

			{curSelectNodeIdx !== null && curType === 'button' && (
				<div>
					<span className={styles.rightBarT}>组件标识</span>
					<input
						onChange={(event) => valueChange(event.target.value, 'tag')}
						type="text"
						value={curSelectNode.tag || ''}
					/>
					<br />
					<span className={styles.rightBarT}>按钮文本</span>
					<input
						type="text"
						onChange={(event) => valueChange(event.target.value, 'value')}
						value={curSelectNode.value || ''}
					/>
					<br />
					<span className={styles.rightBarT}>是否为朴素按钮</span>
					<br />
					<Checkbox onChange={(event) => valueChange(event.target.checked, 'simple')} checked={curSelectNode.simple}>
						{curSelectNode.simple ? '是' : '否'}
						&nbsp;&nbsp;&nbsp;&nbsp; tips: 朴素按钮不要选择默认类型
					</Checkbox>
					<br />
					<span className={styles.rightBarT}>按钮类型</span>
					<br />
					<Select onChange={(value) => valueChange(value, 'btnType')} value={curSelectNode.btnType || 'default'}>
						<Option value={'default'}>默认</Option>
						<Option value={'primary'}>基础</Option>
						<Option value={'dashed'}>虚线</Option>
						<Option value={'danger'}>危险</Option>
						<Option value={'link'}>链接</Option>
					</Select>
					<br />
					<span className={styles.rightBarT}>按钮大小尺寸</span>
					<br />
					<Select onChange={(value) => valueChange(value, 'size')} value={curSelectNode.size || 'default'}>
						<Option value={'large'}>大</Option>
						<Option value={'default'}>中</Option>
						<Option value={'small'}>小</Option>
					</Select>
					<br />
					<span className={styles.rightBarT}>按钮文本大小</span>
					<br />
					<Select onChange={(value) => valueChange(value, 'fontSize')} value={curSelectNode.fontSize || 14}>
						<Option value={12}>12px</Option>
						<Option value={14}>14px</Option>
						<Option value={16}>16px</Option>
					</Select>
				</div>
			)}

			{curSelectNodeIdx !== null && curType === 'radio' && (
				<div>
					<span className={styles.rightBarT}>组件标识</span>
					<input
						onChange={(event) => valueChange(event.target.value, 'tag')}
						type="text"
						value={curSelectNode.tag || ''}
					/>
					<br />
					<span className={styles.rightBarT}>绑定字段</span>
					<input
						type="text"
						onChange={(event) => valueChange(event.target.value, 'field')}
						key={curSelectNodeIdx}
						value={curSelectNode.field || ''}
					/>
					<br />
					<span className={styles.rightBarT}>单选选项</span>
					<Table
						columns={rightBartColumns}
						dataSource={curSelectNode.options}
						rowKey={'uuid'}
						pagination={false}
						bordered
					/>
				</div>
			)}

			{curSelectNodeIdx !== null && curType === 'checkbox' && (
				<div>
					<span className={styles.rightBarT}>组件标识</span>
					<input
						onChange={(event) => valueChange(event.target.value, 'tag')}
						type="text"
						value={curSelectNode.tag || ''}
					/>
					<br />
					<span className={styles.rightBarT}>绑定字段</span>
					<input
						type="text"
						onChange={(event) => valueChange(event.target.value, 'field')}
						key={curSelectNodeIdx}
						value={curSelectNode.field || ''}
					/>
					<br />
					<span className={styles.rightBarT}>多选选项</span>
					<Table
						columns={rightBartColumns}
						dataSource={curSelectNode.options}
						rowKey={'uuid'}
						pagination={false}
						bordered
					/>
				</div>
			)}
			{curSelectNodeIdx !== null && curType === 'select' && (
				<div>
					<span className={styles.rightBarT}>组件标识</span>
					<input
						onChange={(event) => valueChange(event.target.value, 'tag')}
						type="text"
						value={curSelectNode.tag || ''}
					/>
					<br />
					<span className={styles.rightBarT}>绑定字段</span>
					<input
						type="text"
						onChange={(event) => valueChange(event.target.value, 'field')}
						key={curSelectNodeIdx}
						value={curSelectNode.field || ''}
					/>
					<br />
					<span className={styles.rightBarT}>下拉选项</span>
					<Table
						columns={rightBartColumns}
						dataSource={curSelectNode.options}
						rowKey={'uuid'}
						pagination={false}
						bordered
					/>
				</div>
			)}
			{curSelectNodeIdx !== null && curType === 'datepicker' && (
				<div>
					<span className={styles.rightBarT}>组件标识</span>
					<input
						onChange={(event) => valueChange(event.target.value, 'tag')}
						type="text"
						value={curSelectNode.tag || ''}
					/>
					<br />
					<span className={styles.rightBarT}>{curSelectNode.pickerType === 'range' ? '绑定开始字段' : '绑定字段'}</span>
					{curSelectNode.pickerType !== 'range' && (
						<input
							type="text"
							onChange={(event) => valueChange(event.target.value, 'field')}
							value={curSelectNode.field || ''}
						/>
					)}
					{curSelectNode.pickerType === 'range' && (
						<input
							type="text"
							onChange={(event) => valueChange(event.target.value, 'startField')}
							value={curSelectNode.startField || ''}
						/>
					)}
					<br />
					{curSelectNode.pickerType === 'range' && (
						<>
							<span className={styles.rightBarT}>绑定结束字段</span>
							<input
								type="text"
								onChange={(event) => valueChange(event.target.value, 'endField')}
								value={curSelectNode.endField || ''}
							/>
							<br />
						</>
					)}
					<span className={styles.rightBarT}>日期选择器类型</span>
					<br />
					<Select onChange={(value) => valueChange(value, 'pickerType')} value={curSelectNode.pickerType || 'default'}>
						<Option value={'default'}>默认</Option>
						<Option value={'year'}>年</Option>
						<Option value={'month'}>月</Option>
						<Option value={'week'}>周</Option>
						<Option value={'range'}>范围</Option>
					</Select>
				</div>
			)}
			{curSelectNodeIdx !== null && curType === 'image' && (
				<div>
					<span className={styles.rightBarT}>组件标识</span>
					<input
						onChange={(event) => valueChange(event.target.value, 'tag')}
						type="text"
						value={curSelectNode.tag || ''}
					/>
				</div>
			)}

			{curSelectNodeIdx !== null && (
				<>
					<div>
						<br />
						<div className={styles.tips}>tips: 宽高包含拖动节点的边框(设置要比实际多2)</div>
						<span className={styles.rightBarT}>宽度设置</span>
						<input
							onChange={(event) => valueChange(~~event.target.value, 'width')}
							type="text"
							value={curSelectNode.width || ''}
						/>
					</div>
					<div>
						<span className={styles.rightBarT}>高度设置</span>
						<input
							onChange={(event) => valueChange(~~event.target.value, 'height')}
							type="text"
							value={curSelectNode.height || ''}
						/>
					</div>
				</>
			)}

			<div className={styles.btnBox}>
				<button className={styles.btnL} onClick={submitNode}>
					应用
				</button>
				<button className={styles.btnR} onClick={resetNode}>
					重置
				</button>
			</div>
		</div>
	)
}

export default RightBar
